<template>
    <div class="bg-white px-3" style="margin: -20px; margin-top:-1rem; margin-bottom: 0!important;">
        <el-tabs v-model="tabIndex" @tab-click="handleClick" class="ml-1">
            <el-tab-pane v-for="(tab, tabI) in tabBars" :key="tabI" :label="tab.name">
                <!-- 标签页的内容 -->
                <!-- 高级搜索-->
                <button-search ref="buttonSearch" placeholder="要搜索的商品名称" @search="searchEvent">
                    <!-- 会匹配和使用到slot name=left的插槽 -->
                    <template #left>
                        <!-- 左边的插槽 -->
                        <router-link :to="{path:'/shop/goods/create'}">
                            <el-button type="success" size="mini" style="margin-right: 3px;">发布商品</el-button>
                        </router-link>
                        <el-button type="warning" size="mini">恢复商品</el-button>
                        <el-button type="danger" size="mini">批量删除</el-button>

                        <el-button type="success" size="mini" @click="changeStatus">上架</el-button>

                        <el-button type="danger" size="mini">下架</el-button>
                        <el-button size="mini">推荐</el-button>
                    </template>
                    <!-- 高级搜索的表单 -->
                    <template #form>
                        <!-- 表单 -->
                        <el-form inline ref="form" :model="form" label-width="70px">
                            <el-form-item label="商品名称" class="mb-0">
                                <el-input v-model="form.name" size="mini" placeholder="输入商品名称">

                                </el-input>
                            </el-form-item>
                            <el-form-item label="商品编码" class="mb-0">
                                <el-input v-model="form.code" size="mini" placeholder="输入商品编码">

                                </el-input>
                            </el-form-item>
                            <el-form-item label="商品类型" class="mb-0">
                                <el-select v-model="form.type" style="height: 28px; line-height: 28px;"
                                    placeholder="选择商品类型">
                                    <el-option label="区域一" value="shanghai">

                                    </el-option>
                                    <el-option label="区域二" value="beijing">

                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="商品分类" class="mb-0">
                                <el-input v-model="form.category" size="mini">

                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="info" size="mini" @click="searchEvent">搜索</el-button>
                                <el-button size="mini" @click="clearSearch">清空筛选条件</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                </button-search>
                <!-- 商品列表 -->
                <el-table :data="tableData[tabI].list"
                    style="border: 1px; margin-top: 20px; background-color: antiquewhite;"
                    @selection-change="handleSelectionChange">
                    <!-- 添加顶部间距 -->
                    <el-table-column type="selection" width="45" style="align-items: center;" />
                    <el-table-column label="商品" width="230">
                        <template slot-scope="scope">
                            <div class="media">
                                <img :src="scope.row.cover" style="width:60px; height:60px" class="mr-3" alt="...">
                                <div class="media-body">
                                    <h6 class="mt-0"> {{ scope.row.title }}</h6>
                                    <p class="mb-0">分类： {{ scope.row.category }}</p>
                                    <p class="mb-1">时间： {{ scope.row.create_time }}</p>
                                </div>
                            </div>
                            <!-- {{ scope.row.title }
                    {{ scope.row.cover }}
                    {{ scope.row.create_time }}
                    {{ scope.row.category }} -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="category" label="商品类型" align="center" />
                    <el-table-column prop="sale_count" label="实际销量" align="center" />
                    <el-table-column label="商品排序" align="center">
                        <template slot-scope="scope">
                            <el-button :type="scope.row.status ? 'success' : 'danger'" size="mini" plain
                                @click="changeStatus(scope.row)">{{ scope.row.status ? '上架' : '下架' }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="商品状态" align="center">
                        <template slot-scope="scope">

                            <el-button type="success" size="mini" @click="scope.row, ischeck = 1" plain>审核通过</el-button>
                            <el-button class="ml-0 mt-1" type="danger" size="mini" @click="scope.row, ischeck = 2"
                                plain>审核不通过</el-button>

                        </template>
                    </el-table-column>
                    <el-table-column prop="stock" label="总库存" align="center" />
                    <el-table-column prop="price" label="价格" align="center" />
                    <el-table-column prop="ischeck" label="操作" align="center" width="150">
                        <template>
                            <!-- slot-scope="scope"创建了一个名为scope的新作用域，
                             它包含了子组件传递给插槽的所有数据。然后我们可以使用v-for指令来遍历scope.items。 -->
                            <el-button-group slot-scope="scope">
                                <!-- plain镂空 -->
                                <el-button type="primary" icon="el-icon-arrow-left" size="mini" plain>修改</el-button>
                                <el-button type="danger" size="mini" plain @click="delItem(scope.$index)">删除</el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 底部 -->
                <div style="height: 60px;">
                    <el-footer class="border-top d-flex align-items-center px-0 position-fixed bg-white"
                        style="bottom:0;left: 200px;right: 0; z-index: 100;">
                        <!-- flex:1占剩余的所有空间 -->
                        <div style="flex: 1;">
                            <el-pagination :current-change="tableData[tabI].currentPage"
                                :page-sizes="[100, 200, 300, 400]" :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper" :total="400">
                            </el-pagination>
                        </div>

                    </el-footer>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    import buttonSearch from '@/components/common/button-search.vue';

    export default {
        name: "GoodsList",
        components: { buttonSearch },
        data() {
            return {
                tabIndex: 0,
                tabBars: [
                    { name: "审核中" },
                    { name: "出售中" },
                    { name: "已下架" },
                    { name: "库存预警" },
                    { name: "回收站" },
                ],
                form: {
                    name: '',
                    code: '',
                    type: '',
                    category: '',
                },
                tableData: [],
                multipleSelection: [],
            };
        },
        created() {
            this.__getData();
        },
        methods: {
            // 生成数据
            __getData() {
                for (let i = 0; i < this.tabBars.length; i++) {
                    this.tableData.push({
                        //让每一个选项卡都对应一个单独的页
                        currentPage: 1,
                        list: [],
                    })
                    for (let j = 0; j < 20; j++) {
                        this.tableData[i].list.push({
                            id: j,
                            title: '我们' + i + '-' + j,
                            cover: require('@/assets/image.png'),
                            create_time: '2024-11-12',
                            category: "专辑",
                            type: '歌手专辑',
                            sale_count: 23240,
                            order: 2213,
                            status: 1,
                            stock: 28731,
                            price: 279,
                            ischeck: 1,
                            // 0未审核，1审核通过，2不通过

                        })
                    }
                }
            },
            // 用来加载数据，监听点的是哪一个tab
            handleClick() {
                // console.log(this.activeName);
            },
            // 清空筛选条件
            clearSearch() {
                this.form = {
                    name: '',
                    code: '',
                    type: '',
                    category: "",
                }
                this.$refs.buttonSearch[this.tabIndex].closeSuperSearch();
            },
            // 搜索事件
            searchEvent(e = false) {
                // 简单搜索,如果e有值
                if (typeof e === 'string') {
                    return console.log("简单搜索事件", e)
                }
                // 高级搜索事件
                console.log("高级搜索")
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            // 删除当前商品
            delItem(obj, index) {
                this.$confirm(obj.all ? '是否确定删除该选中所有的图片' : '是否删除图片', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.tableData[this.tabIndex].list.splice(index, 1);
                })
            },
            // 修改商品或者上下架
            changeStatus(item) {
                item.status = item.status === 1 ? 0 : 1;
            }

        },
    };
</script>
<style scoped>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>